<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Support</title>
    <!-- <base href="./"> -->
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
    <app-root>
        <style>
            .load1 {
                margin: 100px auto;
                width: 50px;
                height: 60px;
                text-align: center;
                font-size: 10px;
            }
            
            .load1>div {
                background-color: #b70c38;
                height: 100%;
                width: 6px;
                display: inline-block;
                -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
                animation: stretchdelay 1.2s infinite ease-in-out;
            }
            
            .load1 .rect2 {
                -webkit-animation-delay: -1.1s;
                animation-delay: -1.1s;
            }
            
            .load1 .rect3 {
                -webkit-animation-delay: -1.0s;
                animation-delay: -1.0s;
            }
            
            .load1 .rect4 {
                -webkit-animation-delay: -0.9s;
                animation-delay: -0.9s;
            }
            
            .load1 .rect5 {
                -webkit-animation-delay: -0.8s;
                animation-delay: -0.8s;
            }
            
            @-webkit-keyframes stretchdelay {
                0%,
                40%,
                100% {
                    -webkit-transform: scaleY(0.4)
                }
                20% {
                    -webkit-transform: scaleY(1.0)
                }
            }
            
            @keyframes stretchdelay {
                0%,
                40%,
                100% {
                    transform: scaleY(0.4);
                    -webkit-transform: scaleY(0.4);
                }
                20% {
                    transform: scaleY(1.0);
                    -webkit-transform: scaleY(1.0);
                }
            }
        </style>

        <div class="load1">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
        </div>
    </app-root>
</body>
<script src="./assets/js/jquery-3.1.1.min.js"></script>
<script src="./assets/js/jquery-ui.min.js"></script>

<!-- 平台通讯 -->
<script src="./assets/js/APIFunctions.js"></script>
<script src="./assets/js/APIWrapper.js"></script>
<script>
    document.oncontextmenu = function(e) {
        e.preventDefault();
    };
    // document.addEventListener('DOMContentLoaded', function() {
    //     var oBox = document.getElementById('box');
    //     //定义列
    //     var C = 7;
    //     //定义列
    //     var R = 4;
    //     //动态创建span 并且平铺
    //     for (var i = 0; i < R; i++) {
    //         for (var j = 0; j < C; j++) {
    //             var oSpan = document.createElement('span');
    //             //设置每个span的宽高
    //             oSpan.style.width = oBox.offsetWidth / C + 'px';
    //             oSpan.style.height = oBox.offsetHeight / R + 'px';
    //             //给每个span定位
    //             oSpan.style.left = j * oBox.offsetWidth / C + 'px';
    //             oSpan.style.top = i * oBox.offsetHeight / R + 'px';
    //             oBox.appendChild(oSpan);
    //             //给每个span的背景图片定位 平铺后才能拼成一张完整的图片
    //             oSpan.style.backgroundPosition = -oSpan.offsetLeft + 'px -' + oSpan.offsetTop + 'px';
    //             oSpan.style.position = 'absolute';
    //             oSpan.style.background = 'red';
    //         }
    //     }
    //     var aSpan = oBox.children;
    //     //定义一个图片的初始值
    //     var iNow = 0;
    //     //定义开关
    //     var bReady = true;
    //     //点击图片时每个span爆炸
    //     oBox.onclick = function() {
    //         //防止点击过快时图片会跳
    //         if (bReady == false) {
    //             return;
    //         }
    //         bReady = false;
    //         //每点击一次加1
    //         iNow++;
    //         for (var i = 0; i < aSpan.length; i++) {
    //             //获取每个span移动的距离
    //             var x = aSpan[i].offsetLeft - oBox.offsetWidth / 2;
    //             var y = aSpan[i].offsetTop - oBox.offsetHeight / 2;
    //             //每个span移动并且随机旋转角度 并且放大
    //             aSpan[i].style.WebkitTransform = 'perspective(800px) translate(' + x + 'px,' + y + 'px) rotateX(' + rnd(-180, 180) + 'deg) rotateY(' + rnd(-180, 180) + 'deg) scale(1.4)';
    //             aSpan[i].style.WebkitTransition = '1s all ease';
    //             aSpan[i].style.opacity = 0;

    //         }
    //     };
    //     // //过渡完成后要执行的
    //     // aSpan[1].addEventListener('transitionend', function() {
    //     //     for (var i = 0; i < aSpan.length; i++) {
    //     //         //瞬间把爆炸出去的图片还原
    //     //         aSpan[i].style.WebkitTransform = 'perspective(800px) translate(0px,0px) rotateX(0deg) rotateY(0deg) scale(1)';
    //     //         aSpan[i].style.opacity = 1;
    //     //         //瞬间回来的过程不需要过渡时间 所以把它干掉
    //     //         aSpan[i].style.WebkitTransition = 'none';
    //     //         //换图
    //     //         aSpan[i].style.backgroundImage = 'url("a' + iNow % 3 + '.png")';
    //     //         oBox.style.backgroundImage = 'url("a' + (iNow + 1) % 3 + '.png")';
    //     //         //过渡完成后允许点击
    //     //         bReady = true;
    //     //     }
    //     // }, false);
    //     // //随机数函数
    //     function rnd(n, m) {
    //         return parseInt(Math.random() * (m - n) + n);
    //     }
    // }, false);
</script>

</html>